/* =======================================全局配置====================================*/
body{
    /*背景颜色*/
    background-color: rgb(246,246,246);
    /*去掉默认外边框和内填充*/
    margin: 0;
    padding: 0;
}
/*===================================导航栏===================================================*/
#bar{
    /*  导航栏宽度100% 高度为64像素*/
    width: 100%;
    height: 64px;
    /*背景颜色*/
    background-color: white;
    /*定义为弹性盒子   flex*/
    display: flex;
    /* 横向居中 */
    justify-content: center;
    /* 粘型定位 */
    position: fixed;
    top: 0; /* 向上移动0像素 */
    z-index: 1; /* 优先级 */
}

/*导航栏的容器*/
#bar-container{
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: space-between;
}
/*导航栏的左侧菜单功能*/
#bar-container-nav{
    width: 35%;
    display: flex;
    justify-content: space-between;
}
#logo-a{  /* 网站logo图片 */
    display: flex;
    justify-content: center;
    width: 20%;
}
#logo-a img{
    width: 80%;
    height: 100%;
}
#id-nav{  /* 导航栏菜单 */
    width: 75%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#id-nav a{
    text-decoration: none;
    font-size: 20px;
    color: rgb(133,144,166);
}
#id-nav a:hover{
    color: black;
}

/* 导航栏的搜索功能 */
#bar-container-search{
    width: 25%;
    display: flex;
    align-items: center;
}
#bar-container-search a{
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-decoration: none;
    background-color: rgb(246,246,246);
    width: 100%;
    height: 50%;
    border-radius: 10px;
}
#bar-container-search a p{
    padding-left: 10px;
    color: rgb(148,144,174);
}
#bar-container-search a svg{
    padding-right: 10px;
}


/*  消息和个人主页 */
#bar-container-homepage{
    width: 25%;
    display: flex;
    justify-content: space-between;
}
#news{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 30%;
    height: 100%;
    text-decoration: none;
    color: rgb(133,144,166);

}
#news:hover{
    color: black;
}
#homepage{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 60%;
    height: 100%;

    text-decoration: none;
    color: rgb(133,144,166);
}
#homepage img{
    width: 40%;
    height: 70%;
    border-radius: 30px;
}
#homepage:hover{
    color: deepskyblue;
}

/*=============================主体==========================================================*/
#Main{
    width: 70%;
    margin: 70px auto;
    display: flex;
    justify-content: space-between;
}

/* 主体的左侧，也就是展示文章和问题等数据 */
#Main-article{
    width: 68%;
    height: 100%;
    background-color: white;
}
/* 内容导航栏 */
#Main-article-nav{
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-bottom:1px rgb(246,246,246) solid;
}
#Main-article-nav a{
    text-decoration: none;
    color: black;
}
#Main-article-nav a:hover{
    color: deepskyblue;
}

/* 文章box */
.Main-article-essay{
    border-bottom: silver 1px solid;
    margin-top: 10px;
}
.Main-article-essay-title{  /*标题*/
    display: block;
    height: 100%;
    text-decoration: none;
    color: black;
}
.Main-article-essay-title:hover{
    color: rgb(23,81,153);
}
.Main-article-essay-title h3{
    font-size: 19px;
    margin-left: 10px;
    margin-right: 10px;
}

.Main-article-essay-header{ /* 作者消息 */
    height: 100%;
}
.Main-article-essay-header a{
    display: flex;
    align-content: center;
    text-decoration: none;
}
.Main-article-essay-header a img{
    width: 39px;
    height: 39px;
    border-radius: 20px;
    margin-left: 10px;
}
.Main-article-essay-header a p{
    margin-left: 10px;
    color: #8590A6;
}
.Main-article-essay-img-content{  /* 文章封面和内容 */
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 130px;
    text-decoration: none;
}
.Main-article-essay-img-content img{
    width: 25%;
    height: 95%;
    border-radius: 10px;
}
.Main-article-essay-img-content p{
    width: 65%;
    font-size: 18px;
    color: black;
}
.Main-article-essay-footer{  /*文章的页脚*/
    height: 50px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.Main-article-essay-footer a{
    display: block;
    color: black;
    text-decoration: none;
    font-size: 30px;
}

/* 问题box */
.Main-problem{
    margin-top: 10px;
    background-color: white;
    border-bottom: 1px silver solid;
}
.Main-problem-title{
    text-decoration: none;
    color: black;
    display: block;
}
.Main-problem-title:hover{
    color: rgb(23,81,153);
}
.Main-problem-title h3{
    margin: 0 20px;
    font-size: 20px;
}
.Main-problem-content{
    margin-top: 10px;
    display: flex;
    text-decoration: none;
    color: black;
    padding: 0 20px;
    font-size: 18px;
}
.Main-problem-footer{
    margin-top: 10px;
    height: 50px;
    display: flex;
    justify-content: space-around;
}


/* 主体的右侧，展示用户的访问数据，写文章、回答问题等功能 */
#Main-aside{
    width: 30%;
    display: flex;
    flex-direction: column;
}


.Main-aside-create{ /* 创作者中心模块------------------------------------------------------*/
    height: 350px;
    background-color: white;
}

.Main-aside-create-title{
    height: 40px;
    display: flex;
    justify-content: space-between;
}
.Main-aside-create-title-logo{  /* 等级 */
    width: 50%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.Main-aside-create-title-logo-p1{
    font-size: 14px;
    color: black;
}
.Main-aside-create-title-logo-p2{
    color: deepskyblue;
}
.Main-aside-create-title-a{ /*草稿*/
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.Main-aside-create-title-a a{
    display: block;
    text-decoration: none;
    font-size: 10px;
    color: rgb(133,144,166);
}

.Main-aside-create-write{ /* 写作功能   回答问题--写文章--写想法 */
    height: 75px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.Main-aside-create-write-box{
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: black;
}
.Main-aside-create-write-box:hover{
    color: blue;
}
.Main-aside-create-write-box p{
    font-size: 10px;
}

.Main-aside-create-date{ /*网站的浏览数据显示 */
    height: 170px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.Main-aside-create-date-box{
    width: 45%;
    height: 80%;
    background-color: rgb(249,249,250);
    text-decoration: none;
    text-align: center;
    color: black;
}

.Main-aside-create-get{ /* 进入创作者中心 */
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.Main-aside-create-get a{
    padding: 10px 60px;
    border: 1px blue solid;
    text-decoration: none;
}

.Main-aside-advert{ /* 广告模块------------------------------------------------------------------------------------- */
    margin-top: 5px;
    height: 180px;
    background-color: white;
}
.Main-aside-advert-x{
    height: 25px;
}
.Main-aside-advert-x svg{
    float: right;
}
.Main-aside-advert-img{
    display: block;
    width: 100%;
    height: 150px;
}
.Main-aside-advert-img img{
    width: 100%;
    height: 100%;
}


.Main-aside-footer{ /*页脚模块--------------------------------------------------------------------*/
    margin-top: 10px;
    height: 300px;
    background-color: white;
}
.Main-aside-footer-img{ /* 网站公告 */
    width: 100%;
    height: 120px;
    display: block;
    margin-bottom: 5px;
}
.Main-aside-footer-img img{
    width: 100%;
    height: 100%;
}

.Main-aside-footer-function{  /*收藏等等功能*/
    display: flex;
    justify-content: space-between;
    height: 50px;
    text-decoration: none;
}
.Main-aside-footer-function:hover{
    background-color: silver;
}
.Main-aside-footer-function-1{
    width: 60%;
    display: flex;
    align-items: center;
}
.Main-aside-footer-function-1 svg{
    margin-left: 20px;
}
.Main-aside-footer-function-1 p{
    margin-left: 15px;
    color: #8590A6;
}
.Main-aside-footer-function-2{
    width: 20%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.Main-aside-footer-function-2 p{
    padding: 5px 10px;
    color: #8590A6;
    background-color: rgb(246,246,246);
}

/*==================================弹出浮动===========================================================*/
/* 浮动 */
#float-multi{
    position: fixed;
    width: 30%;
    height: 45%;
    /*background-color: rgb(246,246,246);*/
    background-color: snow;
    /*z-index: 2;*/
    top: 25vh;
    left: 60vh;
}
#float-multi-x{
    margin-top: 2px;
    margin-right: 5px;
    height: 27px;
    float: right;
}
#float-multi-title{
    display: flex;
    justify-content: center;
}
#float-multi-lose{
}
#float-multi-lose p{
    margin-left: 10px;
}
#float-multi-lose-content{
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
    border-bottom: silver 1px solid;
}
#float-multi-lose-content:hover{
    background-color: silver;
}
#float-multi-lose-content svg,#float-multi-lose-content p{
    margin-left: 15px;
}

#float-multi-report{

}
#float-multi-report p{
    margin-left: 10px;
}
#float-multi-report-content-1{
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
    border-bottom: silver 1px solid;
}
#float-multi-report-content-1:hover{
    background-color: silver;
}
#float-multi-report-content-2{
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
    border-bottom: silver 1px solid;
}
#float-multi-report-content-2:hover{
    background-color: silver;
}
#float-multi-report-content-1 svg,#float-multi-report-content-1 p,#float-multi-report-content-2 svg,#float-multi-report-content-2 p{
    margin-left: 15px;
}
